<template>
  <div class="store_details_container">
    <div class="store_details_bottom_container">
      <div class="store_details_bottom_wrapper">
        <div class="store_details_bottom_action">
          <div>{{storeDetails.actualPrice}}</div>
          <div>
            <button @click="onClickAdd">加入购物车</button>
            <button>立即购买</button>
          </div>
        </div>
      </div>
    </div>
    <div class="store_details_info_container">
      <div class="store_image_container">
        <div class="store_preview_container">
          <div v-for="(image,index) in images"
          :key="index"
          :class="index===selectIndex?'preview_container_active':'preview_container'"
          @click="onClickChangeImage(index)">
            <img :src="image" class="preview_img"/>
          </div>
        </div>
        <div class="store_main_pic">
          <img :src="images[selectIndex]"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      id:this.$route.query.id,
      selectIndex:0
    }
  },
  computed:{
    storeDetails:function(){
      return this.$store.state.listModule.storeDetails;
    },
    images:function(){
      return this.$store.state.listModule.images;
    }
  },
  methods:{
    onClickChangeImage(index){
      this.selectIndex = index;
    },
    onClickAdd(){
      this.$store.commit("cartModule/ADD_STORE_TO_CART",this.storeDetails)
    }
  },
  mounted(){
    // console.log(this.id)
    this.$store.dispatch("listModule/GET_STORE_DETAILS",this.id)
  }
}
</script>

<style scoped>
.store_details_container
{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(237, 237, 237);
}

.store_details_bottom_container
{
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0px;
  bottom: 0px;
  background: white;
  border-top: 1px solid lightgrey;
}

.store_details_bottom_wrapper
{
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
}

.store_details_bottom_action
{
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.store_details_info_container
{
  width: 80%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  background: white;
}

.store_image_container
{
  width: 50%;
  height: 410px;
  border: 1px solid red;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.store_preview_container
{
  width: 20%;
  height: 100%;
  border: 1px solid blue;
  display: inline-flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: space-around;
}

.store_main_pic
{
  width: 80%;
  height: 100%;
  border: 1px solid blue;
}

.store_main_pic img
{
  width: 100%;
}

.preview_container
{
  width: 60px;
  height: 60px;
  border: 1px solid lightgrey;
}

.preview_container_active
{
  width: 60px;
  height: 60px;
  border: 3px solid gray;
}

.preview_img
{
  width: 60px;
}
</style>